<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div class="demoTable layui-form" >
            房间号：
            <div class="layui-inline">
                <input class="layui-input" name="numbers"  id="numbers" autocomplete="off">
            </div>
            缴费状态：
            <div class="layui-inline" >
                <select name="status"  id="status">
                   <option value="">请选择</option>
                    <option value="1">已缴费</option>
                    <option value="0">未缴费</option>
                </select>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 初始化数据 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="print"> 打印票据 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            {{# if(d.status=='0'){ }}
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">缴费</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
            {{# }else{ }}
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
            {{# } }}
        </script>

    </div>
</div>

<script>
    layui.use(['form', 'table','miniPage','element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            element=layui.element,
            miniPage = layui.miniPage;

        form.render('select');


        table.render({
            elem: '#currentTableId',
            url: 'propertyinfo/queryPropertyAll',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                //{field: 'id', width: 80, title: 'ID', sort: true},
                {templet:'<div>{{d.house.numbers}}</div>',width: 100, title: '房间号'},
                {templet:'<div>{{d.owner.username}}</div>',width: 100, title: '房东'},
                {templet:'<div>{{d.type.name}}</div>',width: 100, title: '费用类型'},
                {field: 'startDate', width: 120, title: '开始时间'},
                {field: 'endDate', width: 120, title: '结束时间'},
                {field: 'money', width: 100, title: '金额'},
                {field: 'status', width: 100, title: '状态',
                 templet: function(res){
                    if(res.status=='0'){
                        return '<span class="layui-badge layui-bg-red" >未缴费</span>';
                    }else{
                        return '<span class="layui-badge layui-bg-gray" >缴费</span>';
                    }
                 }
                },
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line',
            id: 'testReload'
        });


        var $ = layui.$, active = {
            reload: function(){
                var numbers = $('#numbers');
                var status = $('#status');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        numbers:numbers.val(),
                        status:status.val() //获取到status，o还是1
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {   // 监听添加操作
                layer.confirm('你确定要初始化数据吗？',function (index) {
                    layer.close(index);
                    var content = miniPage.getHrefContent('page/business/property/InitCharge.html');

                    var index=openPage(content,"初始化物业费",'70%','70%');
                })

                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                /*
                  1、判断是否有选择记录 如果没有提示
                  2、获取要删除的id集合
                  3、发送请求 实现删除功能
                  4、提示成功 并刷新主页
                 */
                var checkStatus=table.checkStatus(obj.config.id);
                var data =checkStatus.data;
                if(data.length==0){
                    layer.msg("请选择要删除的记录信息");
                }else{
                    //获取要删除id的集合
                    var ids =getCheckId(data);
                    layer.confirm('你确定要删除记录吗？',function (index) {
                         //执行删除功能
                        deleteByIds($,"propertyinfo/deleteByIds",ids,index);
                    })

                }

            }else{
                //打印收据
                var checkStatus=table.checkStatus(obj.config.id);
                var data =checkStatus.data;
                if(data.length>0){//有选中的信息
                    //判断是否来自同一个用户并且是已经缴费的状态
                    var flag=getStatus(data);
                    if(flag==true){
                        //渲染值信息并且打印
                        setValues(data);

                        print_("print_");
                    }else{
                        layer.msg("请选择同一个房间并且是已经缴费的状态");
                    }

                }else{
                    layer.msg("请选中要打印的记录信息");
                }
            }
        });

        /**
         * 数据渲染
         */
        function setValues(data){
            //遍历表格
            var tb=document.getElementById("tab");
            var getmoney=0;

            var rows=tb.rows;
            for(var i=3;i<6;i++){//遍历行
                //遍历每行中的列
                //  for(var j = 0; j<rows[i].cells.length; j++ ){    // 遍历该行的 td
                //设置值信息
                for(var k=0;k<data.length;k++){
                    var n=k+3;
                    if(n==i){
                        //遍历数据
                        rows[i].cells[0].innerHTML=data[k].type.name;
                        rows[i].cells[1].innerHTML="￥";
                        rows[i].cells[2].innerHTML=data[k].money;
                        rows[i].cells[3].innerHTML="支付方式：现金";
                        getmoney+=data[k].money;
                    }
                    //设置金额
                    document.getElementById('money').innerHTML=getmoney;
                    //用户
                    var username=data[0].owner.username;
                    document.getElementById('username').innerHTML=username;
                    var bigMoeny=convertCurrency(getmoney);
                    document.getElementById('bigMoney').innerHTML=bigMoeny;
                    //渲染年月日
                    var date=new Date();
                    document.getElementById("year").innerHTML=date.getFullYear();
                    document.getElementById("month").innerHTML=date.getMonth();
                    document.getElementById("day").innerHTML=date.getDay();
                }
            }
            //获取金额


            element.init();
        }


        /**
         * 判断是否来自同一个用户并且是已缴费状态
         * 如果是返回true
         * 否则返回false
         */
        function getStatus(data){
            var numbers= data[0].houseId;//
            // var status = data[0].status;
            for(var i=0;i<data.length;i++){
                if(data[i].houseId!=numbers || data[i].status!=1){
                    return false;
                }
            }
            return true;
        }
        //打印指定地div层
        function print_(str){
            document.body.innerHTML=document.getElementById(str).innerHTML;
            window.print();
            //强制刷新
            window.history.back();
            location.reload();
        }


        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });


        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.confirm('确定要缴费么？', function (index) {
                    $.ajax({
                        url:'propertyinfo/update',
                        type:"post",
                        data:{'id':data.id},
                        success:function (result) {
                            if(result.code==200){
                                layer.msg('缴费成功',{
                                    iocn:6,
                                    time:500
                                },function () {
                                    //重载父窗口 关闭当前窗口
                                    parent.window.location.reload();
                                    var iframeIndex=parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(iframeIndex);
                                })
                            }else{
                                layer.msg("缴费失败");
                            }
                        }
                    })
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定是否删除', function (index) {
                    deleteByIds($,"propertyinfo/deleteByIds",data.id,index)
                });
            }
        });

    });
</script>

<div class="main"   id="print_"  style="display: none;">
    <div class="body">
        <div class="title">
            <div class="div1">
                <div class="divCtn">
                    <div class="titleCtn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;据</div>
                    <div class="titleUdeLine"></div>
                </div>
            </div>
            <div class="div2">NO：<span style="color: #9C5223;">2396827</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <div class="date">
            <div class="deDiv1">
                <span id="year"></span>年&nbsp;&nbsp;
                <span id="month"></span>&nbsp;月
                <span id="day"></span>日</div>
            <div class="deDiv2">第&nbsp;&nbsp;&nbsp;&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;号</div>
        </div>
        <table  id="tab" border="1" style="width: 100%; border-collapse: collapse;">
            <tr class="tempTr2">
                <td colspan="6" style="border-right-color: #FFFFFF; width: 50%; text-align: left;">&nbsp;&nbsp;兹&nbsp;&nbsp;收&nbsp;&nbsp;到&nbsp;&nbsp; <span id="username"></span></td>
                <td colspan="6" style="width: 50%;">交&nbsp;&nbsp;来&nbsp;&nbsp;下&nbsp;&nbsp;列&nbsp;&nbsp;款&nbsp;&nbsp;项&nbsp;&nbsp;此&nbsp;&nbsp;据</td>
            </tr>
            <tr>
                <td align="center" rowspan="2" style="width: 60%;">摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</td>
                <td colspan="10" align="center" style="width: 10%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</td>
                <td rowspan="2" align="center" style="width: 30%;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
            </tr>
            <tr class="tempTr1">
                <td>￥</td>
                <td>百</td>
                <td>十</td>
                <td>万</td>
                <td>千</td>
                <td>百</td>
                <td>十</td>
                <td>元</td>
                <td>角</td>
                <td>分</td>
            </tr>

            <tr class="tempTr2">
                <td><span id="content"></span></td>
                <td>￥</td>
                <td colspan="9"></td>
                <td>支付方式：现金</td>

            </tr>

            <tr class="tempTr2">
                <td></td>
                <td>￥</td>
                <td colspan="9"></td>
                <td></td>
            </tr>

            <tr class="tempTr2">
                <td></td>
                <td>￥</td>
                <td colspan="9"></td>
                <td></td>
            </tr>

            <tr class="tempTr2">
                <td></td>
                <td></td>
                <td colspan="9"></td>
                <td></td>
            </tr>

            <tr class="tempTr2">
                <td colspan="12" style=" text-align: left;">
                    合计人民币（大写）：<span id="bigMoney"></span>
                    <div style="float: right; display: flex;"><div style="font-size: 20px;">￥：</div><div  id="money" style="width: 180px; height: 30px; border-bottom: solid #000000 1px; text-align: center;"></div></div>
                </td>
            </tr>
        </table>


        <div style="width: 100%; display: flex; height: 40px;">
            <div style="width: 50%; height: 40px; line-height: 40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div style="width: 50%; height: 40px; line-height: 40px;">经手人(盖章)：</div>
        </div>
    </div>
    <!--    <div class="end"><div style="margin-top: 160px; text-align: center; height: 230px;width: 100%;">第<br/>二<br/>联<br/>：<br/>存<br/>根</div></div>-->
</div>


